<template>
  <div>
    <layout-main :active="active">
      <template #left>
        <echart-main class="echartMain">
          <template #title> 资讯中心 </template>
          <template #echart>
            <zxzx-item />
          </template>
        </echart-main>
        <echart-main class="echartMain">
          <template #title> 产业分析 </template>
          <template #echart>
            <echart :options="options1" />
          </template>
        </echart-main>
        <echart-main class="echartMain">
          <template #title> 资源统计 </template>
          <template #echart>
            <echart :options="options5" />
          </template>
        </echart-main>
      </template>
      <template #right>
        <echart-main class="echartMain">
          <template #title> 经济体数量变化 </template>
          <template #echart>
            <echart :options="options4" />
          </template>
        </echart-main>
        <echart-main class="echartMain">
          <template #title> 经济体收入分析 </template>
          <template #echart>
            <echart :options="options3" />
          </template>
        </echart-main>
        <echart-main class="echartMain">
          <template #title> 拥有农机数 </template>
          <template #echart>
            <echart :options="options6" />
          </template>
        </echart-main>
      </template>
    </layout-main>
  </div>
</template>

<script>
import LayoutMain from "components/content/layoutMain/LayoutMain.vue";
import EchartMain from "components/content/echartMain/EchartMain.vue";
import Echart from "components/common/echart/Echart.vue";
import ZxzxItem from "./item/ZxzxItem.vue";
import {
  echarts1,
  echarts3,
  echarts5,
  echarts6,
} from "./echartjs/echarts-ny";
import { agrDataIndusrty } from "network/sy";
export default {
  components: { LayoutMain, EchartMain, Echart, ZxzxItem },
  data() {
    return {
      active: 2,
      options1: null,
      options2: null,
      options3: null,
      options4: null,
      options5: null,
      options6: null,
    };
  },
  created() {
    this.agrDataIndusrty();
  },
  mounted() {
    this.echarts();
  },
  methods: {
    async agrDataIndusrty() {
      let result = await agrDataIndusrty();
      let threeProportion = result.result.threeProportion;
      threeProportion = threeProportion.map((res) => {
        return {
          name: res.name,
          value: parseInt(res.value),
        };
      });
      this.options1 = echarts1(threeProportion);
      let years = [],
        oneNum = [],
        twoNum = [],
        threeNum = [];
      result.result.industryNum.forEach((res) => {
        years.push(res.year);
        oneNum.push(res.oneNum);
        twoNum.push(res.twoNum);
        threeNum.push(res.threeNum);
      });
      this.options3 = echarts3(years, [
        {
          name: "村",
          type: "line",
          data: oneNum,
        },
        {
          name: "企业",
          type: "line",
          data: twoNum,
        },
        {
          name: "农户",
          type: "line",
          data: threeNum,
        },
      ]);
      let years2 = [],
        oneEconomy = [],
        twoEconomy = [],
        threeEconomy = [];
      result.result.industryEconomy.forEach((res) => {
        years2.push(res.year);
        oneEconomy.push(res.oneEconomy);
        twoEconomy.push(res.twoEconomy);
        threeEconomy.push(res.threeEconomy);
      });
      this.options4 = echarts3(years2, [
        {
          name: "村",
          type: "line",
          data: oneEconomy,
        },
        {
          name: "企业",
          type: "line",
          data: twoEconomy,
        },
        {
          name: "农户",
          type: "line",
          data: threeEconomy,
        },
      ]);
    },
    echarts() {
      this.options5 = echarts5({
        x: ["医疗", "教育", "旅游", "园区"],
        y: [100, 52, 300, 250],
      });
      this.options6 = echarts6({
        x: [2015, 2016, 2017, 2018, 2019, 2020],
        y: [100, 52, 300, 250, 333, 218],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.echartMain {
  height: 33.3%;
}
</style>